<style>
    .welcome .layui-card {border:1px solid #f2f2f2;border-radius:5px;}
    .welcome .icon {margin-right:10px;color:#1aa094;}
    .welcome .icon-cray {color:#ffb800 !important;}
    .welcome .icon-blue {color:#1e9fff !important;}
    .welcome .icon-tip {color:#ff5722 !important;}
    .welcome .layuimini-qiuck-module {text-align:center;margin-top:10px}
    .welcome .layuimini-qiuck-module a i {display:inline-block;width:100%;height:60px;line-height:60px;text-align:center;border-radius:2px;font-size:30px;background-color:#F8F8F8;color:#333;transition:all .3s;-webkit-transition:all .3s;}
    .welcome .layuimini-qiuck-module a cite {position:relative;top:2px;display:block;color:#666;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-size:14px;}
    .welcome .welcome-module {width:100%;height:210px;}
    .welcome .panel {background-color:#fff;border:1px solid transparent;border-radius:3px;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.05);box-shadow:0 1px 1px rgba(0,0,0,.05)}
    .welcome .panel-body {padding:10px}
    .welcome .panel-title {margin-top:0;margin-bottom:0;font-size:12px;color:inherit}
    .welcome .label {display:inline;padding:.2em .6em .3em;font-size:75%;font-weight:700;line-height:1;color:#fff;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25em;margin-top:.3em;}
    .welcome .layui-red {color:red}
    .welcome .main_btn > p {height:40px;}
    .welcome .layui-bg-number {background-color:#F8F8F8;}
    .welcome .layuimini-notice:hover {background:#f6f6f6;}
    .welcome .layuimini-notice {padding:7px 16px;clear:both;font-size:12px !important;cursor:pointer;position:relative;transition:background 0.2s ease-in-out;}
    .welcome .layuimini-notice-title,.layuimini-notice-label {padding-right:70px !important;text-overflow:ellipsis !important;overflow:hidden !important;white-space:nowrap !important;}
    .welcome .layuimini-notice-title {line-height:28px;font-size:14px;}
    .welcome .layuimini-notice-extra {position:absolute;top:50%;margin-top:-8px;right:16px;display:inline-block;height:16px;color:#999;}
</style>
<div class="layuimini-container layuimini-page-anim">
    <div class="layuimini-main welcome">
        <div class="layui-row ">
            <div class="layui-col-md12">
                <div class="layui-row">
                    <div class="layui-card" style="height: 400px;">
                        <div class="layui-card-header"><i class="fa fa-warning icon"></i>数据统计</div>
                        <div class="layui-card-body">
                            <div class="welcome-module" style="height: 350px;overflow: auto;">
                                <table class="layui-table" lay-skin="line">
                                    <tr>
                                        <th>楼宇</th>
                                        <th>宿舍数量</th>
                                        <th>入住人数</th>
                                        <th>闲置数量</th>
                                        <th>使用率</th>
                                    </tr>
                                    <tbody id="building-data"></tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="layui-card">
                        <div class="layui-card-header"><i class="fa fa-line-chart icon"></i>报表统计</div>
                        <div class="layui-card-body">
                            <div id="echarts-records" style="min-height:365px"></div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
<script>
    layui.use(['layer','echarts','store'], function () {
        var $ = layui.jquery,
            layer = layui.layer,
            store = layui.store,
            echarts = layui.echarts;

        function loadBuilding(){
            axios.get('building/count',{}).then(function (response) {
                response.data.buildings.forEach(item=>{
                    let html = `<tr>
                                <td>${item.name}</td>
                                <td>${item.all}</td>
                                <td>${item.used}</td>
                                <td>${item.unused}</td>
                                <td>${item.percent}%</td>
                            </tr>`

                    $('#building-data').append(html);
                })
            });
        }
        loadBuilding();
      
        /**
         * 报表功能
         */
        function loadReport(){
            axios.get('building/count',{}).then(function (response) {
                let used = response.data.buildings.map(item=>item.used);
                let name = response.data.buildings.map(item=>item.name);
                loadEchars(name,used);
            });
        }

        loadReport();

        function loadEchars(name,values){
            let echartsRecords = echarts.init(document.getElementById('echarts-records'), 'walden');
            let option = {
                xAxis: {
                    type: 'category',
                    data: name
                },
                tooltip: {},
                yAxis: {
                    type: 'value'
                },
                series: [{
                    data: values,
                    type: 'bar',
                    showBackground: true,
                    backgroundStyle: {
                        color: 'rgba(220, 220, 220, 0.8)'
                    }
                }]
            };
            echartsRecords.setOption(option);
            window.onresize = function () { // echarts 窗口缩放自适应
                echartsRecords.resize();
            }
        }


    });
</script>
